<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="80%"
    :close-on-click-modal="false"
    class="small-dialog"
    top="5vh"
  >
    <el-table
      :data="datas"
      border
      tooltip-effect="dark"
    >
      <el-table-column
        prop="sn"
        label="发货单号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="nickName"
        label="买家信息"
        width="200">
        <template slot-scope="scope">
          <h-user-display v-model="scope.row.apply"></h-user-display>
        </template>
      </el-table-column>
      <el-table-column
        label="创建日期"
        width="150" prop="createTime">
      </el-table-column>
      <el-table-column
        label="联系信息"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <div>联系人: {{scope.row.concat}}</div>
          <div>联系电话: {{scope.row.mobile}}</div>
          <div>联系地址: {{scope.row.district}} {{scope.row.address}}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="件数"
        width="50">
        <template slot-scope="scope">
          <span class="red">{{scope.row.num}}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="note">
      </el-table-column>
    </el-table>
    <div style="padding: 15px 0px;">
      <el-form label-width="90px">
        <el-form-item label="快递公司:" required>
          <div class="row">
            <div class="col col-7">
              <el-select v-model="value.expressId" placeholder="请选择快递公司" class="post-input">
                <el-option
                  v-for="item in kuaidis"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="快递单号:" required>
          <div class="row" style="margin-bottom: 10px;" v-for="(v,index) in posts">
            <div class="col col-7">
              <el-input v-model="v.post" placeholder="请输入订单号,每行一个" class="post-input"></el-input>
              <el-button type="text" @click="addPost"> +</el-button>
              <el-button v-if="index!=0" type="text" @click="deletePost(index,v)"> -</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="value!=null" slot="footer" style="text-align: center">
      <el-button type="primary" @click="doDelivery"> {{btnTxt}}</el-button>
      <el-button @click="closed"> 关闭</el-button>
    </div>
  </el-dialog>
</template>
<style>
  .post-input {
    width: 200px;
  }

  .m-1 {
    margin-bottom: 5px;
  }
</style>

<script>
  import Dialog from 'src/components/common/js/dialog-mix'
  import AdminService from 'src/service/admin'
  import HUserDisplay from 'src/components/common/display/HUserDisplay'

  export default {
    name: 'HAddressDialog',
    mixins: [Dialog],
    components: {HUserDisplay},
    data() {
      return {
        datas: [],
        loading: false,
        kuaidis: [],
        posts: []
      }
    },
    watch: {
      value: function (c, d) {
        const me = this
        this.posts = []
        if (c.expressPosts != undefined && c.expressPosts != null && c.expressPosts.length > 0) {
          c.expressPosts.map(d => {
            me.posts.push({
              post: d
            })
          })
        } else {
          this.posts = []
          this.posts.push({
            post: ''
          })
        }
        this.datas = [c]
      }
    },
    props: {
      value: {
        type: Object,
        default: null
      },
      btnTxt: {
        type: String,
        default: '确认发货'
      }
    },
    methods: {
      doDelivery: function () {
        const me = this
        const expressPosts = []
        if (this.posts != null) {
          this.posts.map(d => {
            if (d.post != null && d.post != '') {
              expressPosts.push(d.post)
            }
          })
        }
        if (expressPosts.length == 0) {
          me.$message.error('请输入快递单号!')
        } else {
          const params = {
            deliveryId: this.value.id,
            expressId: this.value.expressId,
            expressPosts: expressPosts
          }
          AdminService.updateExpress(params).then(ds => {
            if (ds != null) {
              me.$message.success('更新快递信息成功！')
              me.$emit('success', ds.datas)
            } else {
              me.$message.error('更新快递信息失败!')
            }
          })
        }
      },
      deletePost: function (index, data) {
        this.posts.splice(index, 1)
      },
      addPost: function () {
        this.posts.push({
          post: ''
        })
      },
      getKuaidi: function () {
        AdminService.searchExpress({isShow: 1}).then(ds => {
          if (ds != null) {
            this.kuaidis = ds.datas
          }
        })
      }
    },
    mounted: function () {
      const me = this
      if (this.value.expressPosts != undefined && this.value.expressPosts != null && this.value.expressPosts.length > 0) {
        this.value.expressPosts.map(d => {
          me.posts.push({
            post: d
          })
        })
      } else {
        this.posts = []
        this.posts.push({
          post: ''
        })
      }
      this.getKuaidi()
    }
  }
</script>
